<template>
  <div>
   
    <div class="content" :style="{bottom: bottomRem}">
        <div v-if="singleSel=='true' || singleSel == true" class="orgwrap">
            <van-radio-group @change="radioChange" v-model="radioResult">
                <radio-group :list="treeData"></radio-group>
            </van-radio-group>
        </div>
        <div v-else class="orgwrap">
            <van-checkbox-group @change="checkboxChange" v-model="checkboxResult">
                <checkbox-group :list="treeData"></checkbox-group>
            </van-checkbox-group>
        </div>

    </div>
    <div ref="btmDiv" class="bottom">
        <!-- 单选 -->
        <div v-if="singleSel == 'true' || singleSel == true" class="leftdiv display-ib vertical-a-t">
            <div v-if="JSON.stringify(select) != '{}'" >
                <div @click="deleteSelect" class="select font12 display-ib pos-r" style="margin:0 18px 10px 0;">
                    {{select.name}}
                    <div class="pos-a bg-3 w30" style="right:-8px;top:-6px;">
                        <i class="iconfont icon-del1 font12 color-f"></i>
                    </div>     
                </div>
            </div>
        </div>
        <!-- 多选 -->
        <div v-else class="leftdiv display-ib vertical-a-t">
            <div v-if="selectList.length>0">
                <div v-for="item in selectList" :key="item.name" class="display-ib">
                    <div @click="deleteSelect2(item.id)" class="select font12 display-ib pos-r" style="margin:0 18px 10px 0;">
                        {{item.name}}
                        <div class="pos-a bg-3 w30" style="right:-8px;top:-6px;">
                            <i class="iconfont icon-del1 font12 color-f"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <van-button @click="confirmSelect" class="qbtn bg-theme color-f font14 fr">确定</van-button>
    </div>
  </div>
</template>

<script>
import { Notify } from 'vant';
import {mapGetters} from 'vuex';

export default {
    name: 'HelloWorld',
    computed:{
        ...mapGetters([
        'user'
        ])
    },
    // components: {
    //     radioGroup,
    //     checkboxGroup
    // },
    data () {
        return {
            bottomRem: '', // content距离底部的距离
            singleSel: 'true', // 是单选还是多选
            requSel: 'true', // 是否必须选择
            checkboxResult: [], // 复选框，是个数组
            radioResult: '', // 单选框，暂定为字符串
            orgUserData: [],
            treeData: [],
            select: {}, // 单选-被选中的人
            selectList: [], // 多选-被选中的人
            group: '',
        }
    },
    created() {
      
        // console.log("由决策项带来的参数",this.params);
    },
    activated(){
  console.log("11111111111");
        this.params = this.$route.params;
        this.getOrgAndUser();
    },
    mounted() {
        this.getBottomH();
    },
    methods: {
        getBottomH() {
            let height= this.$refs.btmDiv.offsetHeight;
            this.bottomRem = height + 'px';
        },
        getOrgAndUser() {
            console.log("22222222222222");
                    console.log('只包含组织'+JSON.stringify(this.params.peopledata.data[0].singleSel))
                    let res=this.params.peopledata;
                    this.singleSel = res.data[0].singleSel;
                     console.log('只包含组织'+JSON.stringify(this.singleSel))
                    this.requSel = res.data[0].requSel;
                    this.group = res.data[0].group;
                    if (res.data[0].user.length>0) {
                        this.orgUserData = res.data[0].user;
                        var u = res.data[0].user;
                        var newO = []; // 组织
                        var newU = []; // 人
                        for (var i in u) {
                            if (u[i].treeType == 'org') {
                                newO.push(u[i]);
                            }
                            if (u[i].treeType == 'user') {
                                newU.push(u[i]);
                            }
                        }
                        var newOO = []; // 有孩子的组织
                        for (var i in newO) {
                            newO[i].hasChild = false;
                            for (var j in newU) {
                                if (newU[j].parentId == newO[i].id) {
                                    newO[i].hasChild = true; // 这个组织下面有孩子
                                }
                            }
                            if (newO[i].hasChild == true) {
                                newOO.push(newO[i]);
                            }
                        }
                        let newArr = newU.concat(newOO);
                        // 只渲染那种组织下面有孩子的
                        this.treeData = this.util.toTreeData(
                            newArr,
                            "id",
                            "parentId",
                            "id,name,treeType,parentId"
                        );
                    } 
                
        },
        radioChange(name) {
            for (var i in this.orgUserData) {
                if (this.orgUserData[i].id == name) {
                    this.select = this.orgUserData[i];
                    this.select.group = this.group;
                }
            }
        },
        deleteSelect() {
            this.select = {};
            this.radioResult = '';
        },
        deleteSelect2(name) {
            let index = this.selectList.findIndex(item => item.name == name);
            let index2 = this.checkboxResult.findIndex(item => item == name);
            if (index>-1) {
                this.selectList.splice(index, 1);
            }
            if (index2>-1) {
                this.checkboxResult.splice(index2, 1);
            }
            
        },
        checkboxChange(names) {
            this.selectList=this.orgUserData.filter(item=>names.includes(item.id));
            if (this.selectList.length>0) {
                this.selectList[0].group = this.group;
            }
        },
        confirmSelect() {
            if (this.requSel == 'true') { // 是否必须选择
                if (this.singleSel == 'true' || this.singleSel == true) { // 单选
                    if (JSON.stringify(this.select) != '{}') {
                        localStorage.setItem('searchKeyword', JSON.stringify(this.select));
                        localStorage.setItem('searchParams', JSON.stringify(this.params));
                        this.$router.go(-1);
                        // window.opener = null;
                        // window.open("about:blank", "_top").close()
                    }else {
                        Notify({ type: 'warning', message: '请选择一个联系人' });
                    }
                }
                if (this.singleSel == 'false') { // 多选
                    if (this.selectList.length>0) {
                        localStorage.setItem('searchKeyword', JSON.stringify(this.selectList));
                        localStorage.setItem('searchParams', JSON.stringify(this.params));
                        this.$router.go(-1);
                        // window.opener = null;
                        // window.open("about:blank", "_top").close()
                    }else {
                        Notify({ type: 'warning', message: '请至少选择一个联系人' });
                    }
                }
            }else {
                if (this.singleSel == 'true' || this.singleSel == true) { // 单选
                    if (JSON.stringify(this.select) != '{}') {
                        localStorage.setItem('searchKeyword', JSON.stringify(this.select));
                    }else{
                        Notify({ type: 'warning', message: '未选择办理人！' });
                        return;
                    }
                }else if (this.singleSel == 'false'){
                    if (this.selectList.length>0) {
                        localStorage.setItem('searchKeyword', JSON.stringify(this.selectList));
                    }
                }
                localStorage.setItem('searchParams', JSON.stringify(this.params));
                this.$router.go(-1);
            }
            
        },
  }
}
</script>

<style scoped>
    .content {
        position: absolute;
        top: 50px;
        right: 0;
        left: 0;
        /* background: red; */
        overflow-y: auto;
    }
    .orgwrap {
        width: 100%;
    }
    .bottom {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        min-height: 46px;
        background: #eee;
    }
    .leftdiv {
        width: calc(100% - 90px);
        padding: 10px;
        min-height: 46px;
        
    }
    .qbtn {
        width: 80px;
        height: 38px;
        line-height: 38px;
        margin: 4px 5px;
        border-radius: 5px;
    }
    .select {
        padding: 4px 7px;
        border: 1px solid #0080cb;
        background: #e9f7ff;
        border-radius: 4px;
        color: #0080cb;
    }
    .w30 {
        width: 16px;
        height: 16px;
        background: #333;
        border-radius: 50%;
        text-align: center;
        line-height: 16px;
    }
</style>
<style>
    .van-button__content {font-size:unset;}
</style>
